<template>
    <div id="content">
        <div class="menu_name">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <el-image class="avatar" :src="avatar" :fit="fit"></el-image>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <router-link v-if="is_show" to="/admin/signin">
                            <li class="dropdown_li">
                                <span class="top">登录/注册</span>
                            </li>
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/">
                            <li class="dropdown_li">
                                <span class="top">首页</span>
                            </li>
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/admin/articleList">
                            <li class="dropdown_li">
                                <span class="top">后台</span>
                            </li>
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/about">
                            <li class="dropdown_li">
                                <span class="top">关于</span>
                            </li>
                        </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link v-if="!is_show" to="/admin/signin">
                            <li class="dropdown_li">
                                <span @click="clearCookie" class="top">退出登录</span>
                            </li>
                        </router-link>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-row class="content">
            <el-col class="column" :span="24" v-for="(item, index) in articleList" :key="index">
                <el-card :body-style="{ padding: '0px' }" class="card">
                    <div class="article_title" @click="articleDetail( item.id )">{{ item.title }}</div>
                    <div class="article_info">
                        <span class="article_info_username">{{ item.author }}</span>
                        <span class="article_info_date">发表于：{{ item.created_date }}</span>
                        <span class="article_info_label">标签：
                                        <span v-if="item.labels.length === 0">未分类</span>
                                        <el-tag v-else class="tag_margin" v-for="(tag, index) in item.labels" :key="index">{{ tag }}</el-tag>
                                    </span>
                        <div @click="addStar(item.id)" :class="{'el-icon-star-off': true, 'star': true}"><span class="calc_count">{{item.starsCount}}</span></div>
                        <div class="el-icon-message"><span class="calc_count">{{item.CommentCount}}</span></div>
                        <div class="el-icon-view"><span class="calc_count">{{item.read_count}}</span></div>
                    </div>
                    <div class="article_gist">文章摘要：{{ item.gist }}</div>
                    <div @click="articleDetail( item.id, item.status, item.url )" class="article_button article_all">阅读全文 ></div>
                    <div class="article_underline"></div>
                </el-card>
            </el-col>
        </el-row>

        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5]" :page-size="5" layout="prev, pager, next" :total="articleCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'article',
        data() {
            return {
                articleList: [],
                userInfo: [],
                flag: false,
                starsCount: 0,
                messageCount: 0,
                clickCount: 0,
                timer: null,
                articleCount: 10,
                currentPage4: 1,
                avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                is_show: true
            }
        },
        mounted: function() {

           var userInfo = JSON.parse(localStorage.getItem('user'));
            if (userInfo) {
                this.is_show = false;
                this.avatar = userInfo.avatar;
            }
            var _this = this;
            this.$req({
                method: "post",
                url: 'http://49.235.28.88:3000/article/v1/getArticleList',
                data: {
                    page: 1,
                    size: 5
                }
            }).then(function(res) {
                _this.articleList = res.data.payload.article;
                _this.articleCount = res.data.payload.articleCount;
                for (var i = 0; i < _this.articleList.length; i++) {
                    if (_this.articleList[i].labels.length > 0) {
                        _this.articleList[i].labels = _this.articleList[i].labels.split(',');
                    }
                }
            }).catch(function(e) {
                _this.$message.error('服务器可能出现异常!');
            });
        },
        methods: {
            clearCookie() {
                localStorage.removeItem('user');
            },

            handleCurrentChange(val) {
                var page = val;
                var _this = this;
                this.$req({
                    method: "post",
                    url: 'http://49.235.28.88:3000/article/v1/getArticleList',
                    data: {
                        page: page,
                        size: 5
                    }
                }).then(function(res) {
                    _this.articleList = res.data.payload.article;
                    _this.articleCount = res.data.payload.articleCount;
                    for (var i = 0; i < _this.articleList.length; i++) {
                        if (_this.articleList[i].labels.length > 0) {
                            _this.articleList[i].labels = _this.articleList[i].labels.split(',');
                        }
                    }
                }).catch(function(e) {
                    _this.$message.error('服务器可能出现异常!');
                });
            },
            articleDetail: function(id, status, url) {
                if (status == 1) {
                    this.$router.push('/articleDetail/' + id);
                } else {
                    window.location.href = url;
                }

            },
            addStar: function(id) {
                this.userInfo = JSON.parse(localStorage.getItem('user'));
                if (!this.userInfo) {
                    this.$message.success('用户未登录，请先登录!');
                    this.$router.push('/admin/signin');
                } else {
                    var _this = this;

                    this.$req({
                        method: "post",
                        url: 'http://49.235.28.88:3000/article/v1/addArticleStar',
                        data: {
                            account: this.userInfo.account,
                            app_sid: this.userInfo.app_sid,
                            article_id: id
                        }
                    }).then(function(res) {
                        if (res.data.status == 400) {
                            _this.$message.error(res.data.err);
                        } else if (res.data.status == 420) {
                            _this.$message.error(res.data.err.msg);
                            if (!_this.timer) {
                                _this.timer = setInterval(() => {
                                    location.reload();
                                    clearInterval(_this.timer);
                                    _this.timer = null;
                                }, 1000);
                            }
                        } else if (res.data.status == 200) {
                            _this.$message.success(res.data.payload.msg);
                            if (!_this.timer) {
                                _this.timer = setInterval(() => {
                                    location.reload();
                                    clearInterval(_this.timer);
                                    _this.timer = null;
                                }, 1000);
                            }
                        }
                    }).catch(function(e) {
                        _this.$message.error('服务器可能出现异常!');
                    });
                }
            }
        }
    }
</script>

<style scoped>
    @media screen and (max-width:767px) {
        #content {
            width: 98%;
        }
        .column {
            margin: 2% 0;
        }

        .article_info_label {
            display: block;
            margin: 2% 0;
        }

        .article_title {
            display: inline-block;
            color: white;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            margin: 3% 0;
        }

        .dropdown_li {
            color: black;
        }

        .avatar {
            width: 48px;
            height: 48px;
            background-size: cover;
            border-radius: 100px;
        }

        .menu_name {
          text-align: right;
          margin: 2% 0;
        }

    }

    @media screen and (min-width:767px) {
        .column {
            margin: 1% 0;
        }

        .article_title {
            display: inline-block;
            color: white;
            font-size: 22px;
            font-weight: 600;
            cursor: pointer;
            margin: 3% 0;
        }

        .menu_name {
            display: none;
        }
    }

    .card {
        background-color: transparent;
    }



    .block {
        margin: 3% 0;
    }

    .article_title:hover {
        border-bottom: 1px solid #222;
        color: black;
        background: white;
    }

    .article_info {
        color: white;
        font-size: 14px;
        padding-top: 8px;
    }

    .article_info_username {
        margin-right: 10px;
    }

    .article_info_date {
        margin-right: 10px;
    }

    .tag_margin {
        margin: 3px;
    }

    .article_gist {
        text-align: center;
        padding-top: 40px;
        padding-bottom: 40px;
        font-size: 16px;
        color: white;
    }

    .article_button {
        display: inline-block;
        padding: 3px 12px;
        border: 2px solid black;
        color: white;
        font-size: 14px;
        cursor: pointer;
    }

    .article_all:hover {
        color: black;
        background: white;
        font-weight: 600;
    }

    .article_underline {
        height: 1px;
        width: 100%;
        margin-top: 20px;
        background: white;
    }

    .el-icon-message,
    .el-icon-view {
        color: white;
        margin-left: 15px;
    }
</style>
